<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">目的地</li>
            </ol>
          </nav>
        </div>
        <div class="col-md-8">
          <h1 class="fw-bold">全球旅游目的地</h1>
          <p class="text-muted">发现世界各地最美的风景</p>
        </div>
        <div class="col-md-4 text-md-end">
          <div class="d-flex gap-2">
            <select class="form-select">
              <option selected>推荐排序</option>
              <option>价格从低到高</option>
              <option>价格从高到低</option>
              <option>评分最高</option>
            </select>
            <select class="form-select">
              <option selected>全部类型</option>
              <option>海岛</option>
              <option>城市</option>
              <option>自然风光</option>
              <option>历史文化</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-3 mb-4">
          <div class="card border-0 shadow-sm">
            <div class="card-header bg-white fw-bold">
              筛选条件
            </div>
            <div class="card-body">
              <h6 class="fw-bold mb-3">价格范围</h6>
              <div class="mb-4">
                <input type="range" class="form-range" min="0" max="50000" step="1000">
                <div class="d-flex justify-content-between">
                  <span>￥0</span>
                  <span>￥50,000</span>
                </div>
              </div>
              
              <h6 class="fw-bold mb-3">地区</h6>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="asia">
                <label class="form-check-label" for="asia">亚洲</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="europe">
                <label class="form-check-label" for="europe">欧洲</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="northAmerica">
                <label class="form-check-label" for="northAmerica">北美洲</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="southAmerica">
                <label class="form-check-label" for="southAmerica">南美洲</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="oceania">
                <label class="form-check-label" for="oceania">大洋洲</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="checkbox" id="africa">
                <label class="form-check-label" for="africa">非洲</label>
              </div>
              
              <h6 class="fw-bold mt-4 mb-3">评分</h6>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="rating" id="ratingAll">
                <label class="form-check-label" for="ratingAll">全部</label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="rating" id="rating4">
                <label class="form-check-label" for="rating4">
                  <i class="bi bi-star-fill text-warning"></i>
                  <i class="bi bi-star-fill text-warning"></i>
                  <i class="bi bi-star-fill text-warning"></i>
                  <i class="bi bi-star-fill text-warning"></i>
                  & up
                </label>
              </div>
              <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="rating" id="rating3">
                <label class="form-check-label" for="rating3">
                  <i class="bi bi-star-fill text-warning"></i>
                  <i class="bi bi-star-fill text-warning"></i>
                  <i class="bi bi-star-fill text-warning"></i>
                  & up
                </label>
              </div>
            </div>
          </div>
        </div>
        
        <div class="col-lg-9">
          <div class="row">
            <div v-for="(destination, index) in destinations" :key="index" class="col-lg-4 col-md-6 mb-4">
              <div class="card h-100 border-0 shadow-sm">
                <div class="position-relative">
                  <div class="bg-light" style="height: 200px;"></div>
                  <span class="position-absolute top-0 end-0 m-3 badge bg-primary">
                    {{ destination.type }}
                  </span>
                </div>
                <div class="card-body">
                  <div class="d-flex justify-content-between align-items-start mb-2">
                    <h5 class="card-title">{{ destination.name }}</h5>
                    <span class="badge bg-warning">{{ destination.rating }} <i class="bi bi-star-fill"></i></span>
                  </div>
                  <p class="card-text text-muted small mb-3">
                    <i class="bi bi-geo-alt me-1"></i> {{ destination.location }}
                  </p>
                  <div class="d-flex justify-content-between align-items-center">
                    <span class="fw-bold text-primary">￥{{ destination.price }}</span>
                    <NuxtLink :to="'/destinations/' + index" class="btn btn-sm btn-outline-primary">
                      查看详情
                    </NuxtLink>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
              <li class="page-item active"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

useHead({
  title: '目的地 - TravelExplorer'
})

const destinations = [
  { name: '巴黎浪漫之旅', location: '法国', rating: 4.8, price: 8999, type: '城市' },
  { name: '东京文化体验', location: '日本', rating: 4.7, price: 7899, type: '城市' },
  { name: '纽约都市风情', location: '美国', rating: 4.6, price: 12800, type: '城市' },
  { name: '巴厘岛度假', location: '印度尼西亚', rating: 4.9, price: 6999, type: '海岛' },
  { name: '马尔代夫蜜月', location: '马尔代夫', rating: 4.9, price: 19999, type: '海岛' },
  { name: '瑞士阿尔卑斯', location: '瑞士', rating: 4.8, price: 15999, type: '自然风光' },
  { name: '罗马历史之旅', location: '意大利', rating: 4.6, price: 11999, type: '历史文化' },
  { name: '悉尼歌剧院', location: '澳大利亚', rating: 4.7, price: 13999, type: '城市' },
  { name: '埃及金字塔', location: '埃及', rating: 4.5, price: 14999, type: '历史文化' }
]
</script>